<template>
    <div class="image-upload" v-loading="loading">
        <input type="file" @change="change" class="fileContainerclick" accept="image/*"/>
        <div class="imageContainer image-size-100">
            <img :src="image||'http://qiniu.liumingtai.com/157707089201301736.png'"/>
        </div>
    </div>
</template>
<script>

    import {uploadImage} from "../util/upload";
    import {createProp} from "../util/util";

    export default {
        props: {
            value: createProp([String])
        },
        methods: {
            async change(e) {
                this.loading = true
                this.file = e.target.files[0]
                var {path} = await uploadImage(this.file)
                this.image = path
                this.$emit('change', this.image)
                this.loading = false
                e.target.value = null;
            },
        },
        watch: {
            value() {
                this.image = this.value
            }
        },
        data() {
            return {
                loading: false,
                file: null,
                image: "",
            }
        },
        mounted() {
            this.image = this.value
        }
    }
</script>
<style lang="scss" scoped>
    .image-upload {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
            max-width: 100%;
            max-height: 100%;
        }

        .fileContainerclick {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0px;
            left: 0px;
            opacity: 0;

        }
    }


</style>
